<template>
	<view class="content">
		<view class="menu-block block">
			<view class="img">
				<img :src="detailList.faceUrl" style="width: 100%;height: 100%;"/>
			</view>
			<view class="text">
				<view class="line">
				</view>
				<view class="title">
					{{detailList.name}}
				</view>
				<view class="small-title">
					{{detailList.identity}}
				</view>
			</view>
		</view>
		<view class="menu-block1 block">
			<view class="synopsisTitle">
				简介
			</view>
			<view class="synopsis">
				{{detailList.introduce}}
			</view>
		</view>
		<view class="menu-block1 block">
			<view class="synopsisTitle">
				事迹
			</view>
			<view class="synopsis">
				{{detailList.deed}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getEminentPersonById
	} from '@/api/entrepot.js';
	export default {
		data() {
			return {
				detailList:{
					id:1,
					faceUrl:'',
					name:'康凯',
					identity:'康乃升⽂化旅游产业发展有限公司总经理',
					introduce:'康凯，中共党员，1989年出⽣，2012年本科毕业于西北师范⼤学知⾏学院，现任肃北县康乃升⽂化旅游产业发展有限公司总经理，⽢肃⻬⽇玛体育⽂化传播有限公司总经理。',
					deed:'2008年，热爱艺术的康凯，利⽤⾼中毕业的暑假，在肃北县开办了⼀个⼩⼩的艺术辅导班，这是他创业历程的开端。⼤学期间，他积极参加各种社会实践，筹办肃北县⼤学⽣书画作品展、参加“⻘年志愿者远⾜、呼吁保护⼽壁⽣态”环保徒步⾏、“弘扬志愿服务精神、助推肃北和谐发展”等志愿服务活动。2011年，他牵头召集130余名⻘年组建志愿者队伍，完成“肃北县那达慕⺠族⻛情旅游节暨孟赫嘎拉艺术节”活动筹备⼯作及“相约肃北”⼤型⽂艺晚会会场布置，积累了丰富的社会实践经验。'
				}				
			}
		},
		methods: {
			navigate(url) {
				uni.navigateTo({
					url
				})
			},
			getList() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getEminentPersonById({
					id: this.id,
				}).then(data => {
					uni.hideLoading()
					this.detailList = data
				}).catch(() => {
					uni.hideLoading()
				})
			},
		},
		onLoad(e) {
			this.id = e.id
			this.getList()
		}
	}
</script>

<style lang="scss" scoped>
	.menu-block1{
		width: 92%;
		margin: 30rpx auto;
		background: #fff;
		border-radius: 12px;
		padding: 30rpx;
		.synopsisTitle{
			font-weight: 900;
			font-size: 32rpx;
			color: #1A1A1A;
			margin-bottom: 20rpx;
		}
		.synopsis{
			font-size: 28rpx;
			line-height: 60rpx;
			color: #1A1A1A;
		}
	}
	.menu-block {
		display: flex;
		width: 92%;
		margin: 30rpx auto;
		background: #fff;
		border-radius: 12px;
		padding: 30rpx;
		
		.img{
			position: relative;
			width: 70%;
			height: 400rpx;
			background-color: #F8F8F8;
			margin-right: 50rpx;
			margin-top: 30rpx;
			img{
				position: absolute;
				top: -30rpx;
				right: -30rpx;
				border-radius: 20rpx;
			}
		}
		.text{
			display: flex;
			flex-direction: column;
			justify-content: center;
			width: 230px;
			.line{
				width: 10rpx;
				height: 100rpx;
				background-color: #F4F4F4;
				margin: 20rpx 0;
			}
			.title{
				font-weight: 900;
				font-size: 40rpx;
				color: #000;
				margin-bottom: 25rpx;
			}
			.small-title{
				font-size: 28rpx;
				color: #767676;
				line-height: 45rpx;
				margin-bottom: 25rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 4;
				-webkit-box-orient: vertical;
			}
			
		}
	}
</style>